<template>
  <div>
    <!-- <BreadCrumb /> -->
    <!-- <competition-nav /> -->
    <!-- 主要区域 -->
    <div class="major-areas">
      <div class="jx-content" id="scrollcontent">
        <div v-if="true">
          <div class="btn-group fr">
            <el-form :inline="true">
              <el-form-item>
                <div class="button-style">
                  <a :href="`/tes/match-report/check/zip/downAnalAndDist?courseId=${courseId}`">
                    分析查重报告下载
                  </a>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="button-style" @click="downloadInfo">归档下载</div>
              </el-form-item>
            </el-form>
          </div>
          <!-- 任务列表 -->
          <el-table class="chapter-info-table" :data="tableData" style="width: 100%" tooltip-effect="dark">
            <el-table-column type="index" width="55" label="序号"></el-table-column>
            <el-table-column prop="name" label="任务名称" width="280"></el-table-column>
            <el-table-column prop="submitedNum" label="提交进度">
              <template slot-scope="scope">
                <div class="inner-item">
                  <el-progress :percentage="baifen(scope.row.submitedNum, scope.row.sum)" :show-text="false"></el-progress>
                  <span>{{ scope.row.submitedNum }}/{{ scope.row.sum }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="checkedNum" label="审批进度">
              <template slot-scope="scope">
                <div class="inner-item">
                  <el-progress :percentage="baifen(scope.row.checkedNum, scope.row.sum)" :show-text="false"></el-progress>
                  <span>{{ scope.row.checkedNum }}/{{ scope.row.sum }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="Approval(scope.row)">审批</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <div>
                {{tableTips}}
              </div>
            </template>　
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import competitionNav from '@/views/competitionManagement/components/competitionNav.vue'
import { getApprovalList } from '@/api/competitionPlatform'
export default {
  name: 'CompetitionApproval',
  components: {
    BreadCrumb,
    competitionNav,
  },
  data() {
    return {
      courseId: 0,
      taskId: 0,
      // 任务列表
      tableData: [],
      //显隐表格
      isTable: true,
      //表格提示
      tableTips: '',
    }
  },
  created() {
    // 获取课程ID
    this.courseId = this.$localstorage.getLocalStorage('setCourseId')
    //获取批阅章节列表
    this.GetApprovalList()
  },
  methods: {
    //获取批阅章节列表
    GetApprovalList() {
      // getApprovalList(this.courseId)
      this.$http
        .get(`/tes/match-report/check/task?courseId=${this.courseId}`)
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.data == undefined || res.data.data.length == 0) {
              this.tableTips = '管理员未开启审批权限'
            } else {
              this.tableData = res.data.data
              this.isTable = false
            }
          } else {
            if (res.data.message != undefined) {
              this.tableTips = res.data.message
            } else if (res.message != undefined) {
              this.tableTips = res.message
            } else {
              this.tableTips = '下载暂未开启'
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //点击审批
    Approval(row) {
      this.$localstorage.putLocalStorage('NameOfApprovalTask', row.name)
      this.$router.push({ path: '/ApprovalPage', query: { taskId: row.id } })
    },
    // 归档下载
    downloadInfo() {
      if (this.isTable) {
        return this.$alert(this.tableTips)
      }
      this.$http
        .get(
          `/tes/match-report/check/zip/download-check?courseId=${this.courseId}`
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.$downloadfile.download(
              `/tes/match-report/check/zip/download?courseId=${this.courseId}`,
              '审批报告.zip'
            )
          } else {
            this.$message(res.data.message)
          }
        })
    },
    //进度百分比转换
    baifen(a, b) {
      if (b == 0) {
        return 0
      }
      return parseInt((a * 100) / b)
    },
  },
}
</script>
<style lang="scss">
.filter-wraper {
  .input-wraper {
    margin-top: 20px;
    .el-input__inner {
      width: 100%;
    }
  }
}
.el-tooltip__popper {
  max-width: 30%;
  line-height: 22px;
}
.chapter-info-table .el-switch__core {
  width: 28px;
  height: 16px;
}
.chapter-info-table .el-switch {
  margin-left: 15px;
}
.chapter-info-table .el-switch.is-checked .el-switch__core::after {
  margin-left: -13px;
}
.chapter-info-table .el-switch__core:after {
  width: 12px;
  height: 12px;
}
.inner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-progress {
    width: 60%;
  }
  span {
    margin-left: 10px;
  }
}
</style>
<style scoped>
.imgPost {
  vertical-align: inherit;
  position: absolute;
  right: 17px;
  color: rgb(2, 170, 255);
  font-size: 18px;
  padding-top: 5px;
}
.el-button--small:hover {
  color: #1277eb;
}
.el-tree >>> .el-tree-node {
  margin: 6px 0;
}
.el-form-item >>> .el-input__inner {
  width: 200px;
  height: 32px;
  border-radius: 4px;
}
.el-form >>> .el-textarea__inner {
  height: 200px;
  width: 350px;
  resize: none;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-form-item >>> .el-form-item__content {
  height: auto;
}
.block::-webkit-scrollbar {
  width: 2px;
}
.block::-webkit-scrollbar-thumb {
  background: #dededd;
  border-radius: 50px;
}

.chapterTitle {
  width: 390px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.custom-tree-node {
  padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import './../../../styles/ypublic.scss';
.button-style{
  &:hover{
    a{
      color:#fff;
    }
  }
}
.jx-content {
  width: 1200px;
  margin: 20px auto;
  .courseName {
    font-size: 18px;
  }
  .totalScore {
    margin-left: 30px;
    font-size: 15px;
  }
  .topic-models {
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
  }
  .navBox {
    .reportTemplate {
      padding-bottom: 10px;
      margin-left: 190px;
      cursor: pointer;
    }
    .testTemplate {
      padding-bottom: 10px;
      margin-left: 40px;
      cursor: pointer;
    }
    .templateCheck {
      border-bottom: 2px solid $yBlue;
      color: $yBlue;
      cursor: pointer;
    }
  }
  .block {
    margin: 20px 0;
    overflow-y: scroll;
    height: 483px;
  }
  .saveBtn {
    text-align: center;
    margin-top: 10px;
  }
}
</style>